<template>
  <div class="course_edit">
    <div class="flex mb10 flex_h_between">
      <div class="info_text cursor" @click="back"><a-icon type="left" />返回</div>
    </div>
    <div class="course_edit_title">创建活动</div>
    <a-form :form="form" layout="inline" class="form_wrap">
      <a-form-item class="subject_wrap" label="学科：" style="width: 100%;">
        <a-checkbox-group v-model="checkedList" :options="options" v-decorator="['subject',{rules: [{ required: true, message: `请选择学科` }]}]"  class="flex" />
      </a-form-item>
      <a-form-item label="活动名称">
        <a-input v-decorator="['name',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}活动名称` }]}]" placeholder="活动名称" />
      </a-form-item>
      <a-form-item label="授课老师">
        <a-input v-decorator="['teachers',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}授课老师` }]}]" placeholder="授课老师" />
      </a-form-item>
      <a-form-item label="招募人数">
        <a-input-number v-decorator="['recruitNum',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}招募人数` }]}]" :min="1" />
      </a-form-item>
      <a-form-item label="招募截止日期">
        <a-date-picker v-decorator="['recruitEndDate',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}招募截止日期` }]}]" format="YYYY-MM-DD HH:mm:ss" show-time placeholder="招募截止日期" />
        <p style="line-height: 20px;font-size:12px;color:#999">您可在招募截止日期前取消该活动，超过截止日期后则无法取消</p>
      </a-form-item>
      <a-form-item label="消耗积分">
        <a-input-number v-decorator="['consumeScore',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}消耗积分` }]}]" :min="1" />
      </a-form-item>
      <a-form-item label="志愿者人数">
        <a-input-number v-decorator="['volunteerNum',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}志愿者人数` }]}]" :min="1" />
      </a-form-item>
      <a-form-item label="志愿者奖励积分">
        <a-input-number v-decorator="['volunteerScore',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}志愿者奖励积分` }]}]" :min="1" />
      </a-form-item>
      <a-form-item label="活动开始日期">
        <a-date-picker v-decorator="['startDate',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}活动开始日期` }]}]" placeholder="活动开始日期" style="width: 100%" />
      </a-form-item>
      <a-form-item label="活动结束日期">
        <a-date-picker v-decorator="['endDate',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}活动结束日期` }]}]" placeholder="活动结束日期" style="width: 100%" />
      </a-form-item>
      <a-form-item label="上课时间">
        <a-input v-decorator="['courseTime',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}上课时间` }]}]" placeholder="上课时间" />
      </a-form-item>
      <a-form-item label="课时总数">
        <a-input-number v-decorator="['courseNum',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}课时总数` }]}]" :min="1" />
      </a-form-item>
      <a-form-item label="地点">
        <a-input v-decorator="['address',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}地点` }]}]" placeholder="地点" />
      </a-form-item>
      <a-form-item label="适宜人群">
        <a-select v-decorator="['suitable', { rules: [{ required: true, message: `请选择适宜人群` }] }]" placeholder="适宜人群">
          <a-select-option value="adult">成人</a-select-option>
          <a-select-option value="children">儿童</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="儿童年龄范围" v-if="form.getFieldValue('suitable') === 'children' || detail.suitable === 'children'">
        <a-input-number v-decorator="['lowAge',{rules: [{ required: form.getFieldValue('suitable') === 'children', message: `${$t('common.pleaseEnter')}儿童年龄范围` }]}]" style="width: 142px" /> - <a-input-number v-decorator="['highAge',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}儿童年龄范围` }]}]" style="width: 142px" />
      </a-form-item>
      <a-form-item label="家长陪同" v-if="form.getFieldValue('suitable') === 'children' || detail.suitable === 'children'">
        <a-select v-decorator="['parents', { rules: [{ required: form.getFieldValue('suitable') === 'children', message: `请选择是否家长陪同` }] }]" placeholder="家长陪同">
          <a-select-option value="Y">是</a-select-option>
          <a-select-option value="N">否</a-select-option>
        </a-select>
      </a-form-item>
      <br/>
      <br/>
      <br/>
      <a-form-item label="活动描述" class="desc" style="width:100%">
        <a-button type="primary" @click="aiClick" :loading="aiLoading" class="mb10">一键生成活动描述</a-button>
        <editor style="width:calc(100% -120px);" height="500px" v-decorator="['content', { rules: [{ required: true, message: `请填写活动描述` }] }]" :content="detail.content || ''" @edit='courseEdit'></editor>
        <!-- <editor v-model='values' @edit='courseEdit' height="200px" :simpleToolBar="true" :disabled="isDisabled" @onEditorBlur="onEditorBlur"></editor> -->
      </a-form-item>
      <a-row class="mt20 text_center" style="width:100%">
        <a-form-item class="mt20 text_center">
          <a-button type="primary" @click="submit" style="width: 150px;height:40px;">提交</a-button>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import Editor from '@/components/Editor/Editor'
import { createCourse, getCourseDetail, aiPost } from '@/api/config'
export default {
  name: 'intro',
  components: { Editor },
  data () {
    return {
      moment,
      form: this.$form.createForm(this),
      options: [
        { value: 'science', label: '科学(对应理、工和医学部)' },
        { value: 'humanity', label: '人文(对应人文社科学部)' },
        { value: 'foreignLanguage', label: '外语(对应外国语学院)' },
        { value: 'art', label: '艺术(对应艺术学院)' },
        { value: 'sports', label: '体育(对应体育教研部)' }
      ],
      checkedList: [],
      detail: {},
      aiLoading: false
    }
  },
  computed: {
    ...mapState({
    })
  },
  async mounted () {
    if (this.$route.query.id) {
      await this.getDetail()
      let detail = JSON.parse(JSON.stringify(this.detail))
      detail.subject = detail.subject && detail.subject.split(',')
      this.form.setFieldsValue(detail)
      this.$forceUpdate()
    }
  },
  watch: {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getDetail () {
      let res = await getCourseDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    courseEdit (val, text) {
      console.info(val, text)
      // this.$emit('changePositionEdit', val, text, this.keySign)
      // this.$emit('change', val, this.keySign)
    },
    async createData (params) {
      let res = await createCourse(params)
      if (res.code === 200) {
        this.$message.success('提交成功')
      } else {
        this.$message.error(res.message)
      }
    },
    async submit () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.info(values)
          let valuesCopy = JSON.parse(JSON.stringify(values))
          valuesCopy.startDate = moment(valuesCopy.startDate).format('YYYY-MM-DD')
          valuesCopy.endDate = moment(valuesCopy.endDate).format('YYYY-MM-DD')
          valuesCopy.recruitEndDate = moment(valuesCopy.recruitEndDate).format('YYYY-MM-DD HH:mm:ss')
          valuesCopy.subject = valuesCopy.subject.join()
          console.info(valuesCopy)
          if (this.$route.query.id) {
            valuesCopy.id = this.$route.query.id
          }
          await this.createData(valuesCopy)
          if (this.$store.state.user.userInfo.role === 'ROLE_VENDOR') {
            this.$router.push('/course/myCourseList')
          } else {
            this.$router.push('/courses/courseManageList')
          }
        }
      })
    },
    async aiClick () {
      let formData = this.form.getFieldsValue()
      let context = `请根据如下描述生成一个活动招募通知：${formData.name ? '活动名称：' + formData.name + ',' : ''}${formData.teachers ? '授课老师：' + formData.teachers + ',' : ''}${formData.recruitNum ? '招募人数：' + formData.recruitNum + ',' : ''}${formData.recruitEndDate ? '招募截止日期：' + moment(formData.recruitEndDate).format('YYYY-MM-DD') + ',' : ''}${formData.consumeScore ? '消耗积分：' + formData.consumeScore + ',' : ''}${formData.volunteerNum ? '志愿者人数：' + formData.volunteerNum + ',' : ''}${formData.volunteerScore ? '志愿者奖励积分：' + formData.volunteerScore + ',' : ''}${formData.startDate ? '活动开始日期：' + moment(formData.startDate).format('YYYY-MM-DD') + ',' : ''}${formData.endDate ? '活动结束日期：' + moment(formData.endDate).format('YYYY-MM-DD') + ',' : ''}${formData.courseTime ? '上课时间：' + formData.courseTime + ',' : ''}${formData.courseNum ? '课时总数：' + formData.courseNum + ',' : ''}${formData.address ? '地点：' + formData.address + ',' : ''}${formData.suitable ? '适宜人群：' + (formData.suitable === 'children' ? '儿童' : '成人') + ',' : ''}${formData.suitable === 'children' ? '年龄范围：' + formData.lowAge + ' - ' + formData.highAge + ',' : ''}${formData.suitable === 'children' ? '家长陪同：' + (formData.parents === 'Y' ? '是' : '否') + ',' : ''}`
      console.info(context)
      this.aiLoading = true
      // TODO 此处可放开
      // let res = await aiPost({ context })
      let res = {
        code: 200,
        message: '成功',
        data: '活动招募通知：\n\n标题：【2024智能网联汽车产业展览会】志愿者与参与者招募启动！\n\n尊敬的汽车产业爱好者们，\n\n我们荣幸地宣布，即将在2024年7月13日举行的“2024智能网联汽车产业展览会”现正式开启志愿者及参与者的招募工作。此次活动将在北京·中国国际展览中心（天竺新馆）隆重举行，旨在为汽车行业的专业人士和爱好者提供一个交流和学习的平台。\n\n【活动详情】\n- 活动名称：2024智能网联汽车产业展览会\n- 授课老师：王硕\n- 招募人数：25名\n- 志愿者人数：2名\n- 招募截止日期：2024年7月12日\n- 消耗积分：参与者需消耗5积分\n- 志愿者奖励积分：完成志愿服务后可获得5积分\n- 活动开始日期：2024年7月13日\n- 活动结束日期：2024年7月13日\n- 上课时间：14:00 - 17:00\n- 课时总数：共1课时\n- 地点：北京·中国国际展览中心（天竺新馆）\n- 适宜人群：成人\n\n【参与方式】\n请有意参加的朋友在截止日期前通过我们的在线平台进行报名，并准备好相应的积分进行兑换。对于有意愿成为志愿者的朋友，请注明您的志愿意向，我们将优先处理志愿者申请。\n\n【活动亮点】\n- 听取王硕老师的深入讲解，了解智能网联汽车产业的最新动态和发展趋势。\n- 与行业专家、同行进行面对面的交流。\n- 对于志愿者，除了可以获得积分奖励外，还有机会亲身体验展会的筹备过程，拓宽人脉资源。\n\n我们期待您的积极参与，一同推动智能网联汽车产业的发展，并在这一过程中获得宝贵的知识和经验。不要错过这个难得的机会，立即报名参加吧！\n\n敬请关注，我们在中国国际展览中心（天竺新馆）等待您的到来！\n\n【联系信息】\n如有任何疑问或需要进一步的信息，请通过以下联系方式与我们取得联系：\n- 电话：[填写电话号码]\n- 邮箱：[填写电子邮箱]\n\n感谢您对2024智能网联汽车产业展览会的关注，我们期待与您共同见证智能网联汽车产业的辉煌未来。\n\n敬请踊跃报名，名额有限，先到先得！\n\n组委会\n[填写组委会名称]\n[填写日期]'
      }
      this.aiLoading = false
      if (res.code === 200) {
        this.detail.content = `<div>${res.data.replace(/\n/g, '<br/>')}</div>`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.course_edit
  padding 20px 30px
  background #fff
  .course_edit_title
    text-align center
    font-size 16px
    font-weight bold
  .form_wrap
    // width: 900px;
    // margin: 0 auto;
    :deep(.ant-form-item-label)
      width 120px
      text-align: left;
      margin-right 15px
    :deep(.ant-form-item-control-wrapper)
      width calc(100% - 135px)
    :deep(.ant-input-number)
      width 100%
    :deep(.ant-calendar-picker)
      width 100%
    :deep(.ant-select)
      width 100%
    .ant-row
      // min-width 300px
      width 33%
      margin-right 0
    .subject_wrap
      display: flex;
      align-items: center;
.desc
  width: 100%;
  // :deep(.ant-form-item-control-wrapper)
  //   width calc(100% - 120px) !important
</style>
